import Head from 'next/head'
import { Row, Col, List, Breadcrumb } from 'antd'
import style from './life.module.scss'
import ArticleHeader from '@/components/ArticleHeader/ArticleHeader'
import Author from '@/components/Author/Author'
import Advert from '@/components/Advert/Advert'
import Link from 'next/link'
import { GetServerSideProps } from 'next'
import pathUrl from '@/config/url'
import { useRouter } from 'next/router'
import ToToop from '@/components/ToTop/ToTop'
import { useEffect } from 'react'

type Data = Array<{
  id: number
  title: string
  des: string
  likeNum: number
  sawNum: number
  date: string
  type: string
}>

interface Iprops {
  data: Data
}

const ArticleList: React.FC<Iprops> = ({ data }) => {
  const image = [
    '/81e852dedea8667476eda726f13872e.jpg',
    '/d80522ad2174544eaf6de8a69afdfd5.jpg',
  ]
  const router = useRouter()

  useEffect(() => {
    const scrollY = sessionStorage.getItem('listScoll')
    if (scrollY) window.scrollTo(0, Number(scrollY))
  }, [])
  const sawAdd = (id: number, sawNum: number) => {
    fetch(pathUrl.sawAddUrl, {
      method: 'POST',
      body: JSON.stringify({
        id,
        sawNum,
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
  }
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <ToToop></ToToop>
      <Row justify="center" className="global-main">
        <Col className="global-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <List
            header={
              <div className={style.header}>
                <Breadcrumb>
                  <Breadcrumb.Item key="index">
                    <Link href="/" className={style.item}>
                      首页
                    </Link>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item key="type" className={style.item}>
                    {router.asPath == '/blog/life' ? '生活列表' : '文章列表'}
                  </Breadcrumb.Item>
                </Breadcrumb>
              </div>
            }
            itemLayout="vertical"
            dataSource={data}
            renderItem={(item) => (
              <Link
                href={`${router.asPath}/${item.id}`}
                onClick={() => {
                  sessionStorage.setItem('listScoll', window.scrollY.toString())
                  sawAdd(item.id, item.sawNum)
                }}
              >
                <List.Item className={style.list}>
                  <div className={style.title}>{item.title}</div>
                  <div className={style.ctx}>{item.des}</div>
                  <ArticleHeader
                    likeNum={item.likeNum}
                    date={item.date}
                    sawNum={item.sawNum}
                  ></ArticleHeader>
                </List.Item>
              </Link>
            )}
          />
        </Col>
        <Col className="global-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <div className="global-leftBox">
            <Author></Author>
            {image.map((item, index) => (
              <Advert key={index} src={item}></Advert>
            ))}
          </div>
        </Col>
      </Row>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const props = await (await fetch(`${pathUrl.ip}/${ctx.params?.type}`)).json()
  return {
    props,
  }
}

export default ArticleList
